{extend name="public/layout"}
{block name="title"}资讯列表{/block}
{block name="head"}
<style>
    .img-item {
        height: 3.946411267605634rem;
        background-size: cover;
        background-position: center center;
        position: relative;
    }

    .img-item-wrapper {
        background-color: #fff;
        border-radius: 5px;
        overflow: hidden;
        display: block;
    }

    .img-title {
        padding: 8px 15px;
    }
</style>
{/block}
{block name="content"}

<div class="mt plr pb">
    <div class="img-list" id="img-list">
        {volist name="m" id="vo"}
        <a class="img-item-wrapper mt" href="{:U('article/detail',['id'=>$vo.id])}">
            <div class="img-item" style="background-image: url('{$vo.img_src}')">
            </div>
            <div class="img-title h0">
                {$vo.title}
            </div>
        </a>
        {/volist}
    </div>
</div>
<script type="text/html" id="template">
    {{#for(var i=0,len=d.data.length; i < len ; i++){}}
    <a class="img-item-wrapper mt" href="{:U('article/detail')}?id={{d.data[i].id}}">
        <div class="img-item" style="background-image: url('{{d.data[i].img_src}}')">
        </div>
        <div class="img-title h0">
            {{d.data[i].title}}
        </div>
    </a>
    {{#}}}
</script>
{:_js('js/loader.js')}
{:_js('static/laytpl/laytpl.js')}
<script>
    Loader.m1('img-list','template');
</script>
{/block}